<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的树洞 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <div class="flex items-center">
                <div class="ai-cat mr-3 animate-pulse">
                    🐱
                </div>
                <div>
                    <h1 class="header-title">我的树洞</h1>
                    <p class="text-xs text-neutral-500">AI猫猫在线中</p>
                </div>
            </div>
            <div class="flex items-center">
                <div class="currency-badge mr-3">
                    <i class="fas fa-coins mr-1"></i>
                    <span id="userCurrency">128</span>
                </div>
                <button class="header-action">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Quick Post Card -->
            <div class="card card-gradient mb-6">
                <div class="text-center">
                    <h3 class="text-lg font-semibold mb-3">今天的心情是...</h3>
                    <button onclick="window.location.href='post.html'" class="btn btn-outline w-full" style="color: white; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1);">
                        <i class="fas fa-pen mr-2"></i>
                        写下心情日记
                    </button>
                </div>
            </div>

            <!-- Statistics Card -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-chart-bar mr-2 text-primary"></i>
                    我的暖心数据
                </h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-primary mb-1">23</div>
                        <div class="text-xs text-neutral-500">发布日记</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-secondary mb-1">156</div>
                        <div class="text-xs text-neutral-500">收到暖心</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-warning-500 mb-1">89</div>
                        <div class="text-xs text-neutral-500">给出暖心</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-success-500 mb-1">45</div>
                        <div class="text-xs text-neutral-500">公益贡献</div>
                    </div>
                </div>
            </div>

            <!-- My Diaries -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold flex items-center">
                        <i class="fas fa-book mr-2 text-primary"></i>
                        我的日记
                    </h3>
                    <button class="btn-text text-sm">
                        查看全部 <i class="fas fa-chevron-right icon-xs ml-1"></i>
                    </button>
                </div>

                <!-- Diary List -->
                <div id="diaryList">
                    <!-- Diary Item 1 -->
                    <div class="card card-hover mb-4" onclick="window.location.href='diary-detail.html?id=diary001'">
                        <div class="flex items-start">
                            <span class="mood-emoji">😊</span>
                            <div class="flex-1">
                                <h4 class="font-medium mb-2">今天的阳光很温暖</h4>
                                <p class="text-sm text-neutral-600 mb-3 leading-relaxed">走在路上看到小猫咪晒太阳，突然觉得生活还是很美好的...</p>
                                <div class="flex items-center justify-between text-xs text-neutral-500">
                                    <span>1小时前</span>
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center">
                                            <i class="fas fa-robot mr-1 text-primary"></i>
                                            <span>已回复</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fas fa-heart mr-1 text-secondary"></i>
                                            <span>12</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fas fa-paper-plane mr-1 text-info-500"></i>
                                            <span>3次漂流</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Diary Item 2 -->
                    <div class="card card-hover mb-4" onclick="window.location.href='diary-detail.html?id=diary002'">
                        <div class="flex items-start">
                            <span class="mood-emoji">😔</span>
                            <div class="flex-1">
                                <h4 class="font-medium mb-2">有点累了</h4>
                                <p class="text-sm text-neutral-600 mb-3 leading-relaxed">最近工作压力好大，感觉快要撑不住了，不知道什么时候是个头...</p>
                                <div class="flex items-center justify-between text-xs text-neutral-500">
                                    <span>1天前</span>
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center">
                                            <i class="fas fa-robot mr-1 text-primary"></i>
                                            <span>已回复</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fas fa-heart mr-1 text-secondary"></i>
                                            <span>8</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fas fa-paper-plane mr-1 text-info-500"></i>
                                            <span>2次漂流</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Empty State (hidden by default) -->
                    <div id="emptyState" class="hidden text-center py-8">
                        <div class="ai-cat mb-4" style="margin: 0 auto; opacity: 0.5;">
                            😴
                        </div>
                        <p class="text-neutral-500 mb-4">还没有写过日记呢</p>
                        <button onclick="window.location.href='post.html'" class="btn btn-primary btn-sm">
                            写下第一篇日记
                        </button>
                    </div>
                </div>
            </div>

            <!-- Recent AI Responses -->
            <div class="mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-comments mr-2 text-primary"></i>
                    最新AI回复
                </h3>
                
                <div class="card">
                    <div class="flex items-start">
                        <div class="ai-cat mr-3">
                            🤖
                        </div>
                        <div class="flex-1">
                            <div class="bg-neutral-50 rounded-lg p-3">
                                <p class="text-sm leading-relaxed">看到你发现生活中的小美好，我也很开心呢！阳光和小猫咪都是治愈的存在，愿你每天都能发现这样的温暖时刻~ 🐱☀️</p>
                            </div>
                            <div class="flex items-center justify-between mt-2">
                                <span class="text-xs text-neutral-500">回复《今天的阳光很温暖》</span>
                                <div class="warmth-stars">
                                    <i class="fas fa-star warmth-star"></i>
                                    <i class="fas fa-star warmth-star"></i>
                                    <i class="fas fa-star warmth-star"></i>
                                    <i class="fas fa-star warmth-star"></i>
                                    <i class="fas fa-star-half-alt warmth-star"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="bottom-nav">
            <a href="home.html" class="nav-item active" data-page="home">
                <i class="fas fa-home nav-icon"></i>
                <span class="nav-label">树洞</span>
            </a>
            <a href="drift.html" class="nav-item" data-page="drift">
                <i class="fas fa-compass nav-icon"></i>
                <span class="nav-label">漂流</span>
            </a>
            <a href="profile.html" class="nav-item" data-page="profile">
                <i class="fas fa-heart nav-icon"></i>
                <span class="nav-label">暖心</span>
            </a>
            <a href="store.html" class="nav-item" data-page="store">
                <i class="fas fa-gift nav-icon"></i>
                <span class="nav-label">商城</span>
            </a>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 页面特定功能
        document.addEventListener('DOMContentLoaded', function() {
            // 更新用户货币显示
            const currencyElement = document.getElementById('userCurrency');
            if (currencyElement && window.App) {
                currencyElement.textContent = App.data.user.currency;
            }
            
            // 初始化页面动画
            const cards = document.querySelectorAll('.card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.animation = 'fadeInUp 0.5s ease forwards';
                }, index * 100);
            });
        });
    </script>
</body>
</html>
